<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
            <el-button
              style="float: right;"
              type="primary"
              @click="saveUserInfo"
            >{{ editMode ? '保存' : '修改' }}</el-button>
          </div>
          <el-form :model="userInfo" label-width="80px">
            <el-form-item label="账号">
              <el-input v-if="editMode" v-model="userInfo.account" disabled></el-input>
              <span v-else>{{ userInfo.account }}</span>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-if="editMode" v-model="userInfo.password" show-password></el-input>
              <span v-else>******</span>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-if="editMode" v-model="userInfo.name"></el-input>
              <span v-else>{{ userInfo.name }}</span>
            </el-form-item>
            <el-form-item label="手机">
              <el-input v-if="editMode" v-model="userInfo.phone"></el-input>
              <span v-else>{{ userInfo.phone }}</span>
            </el-form-item>
            <el-form-item label="证件号">
              <el-input v-if="editMode" v-model="userInfo.idCard"></el-input>
              <span v-else>{{ userInfo.idCard }}</span>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input v-if="editMode" v-model="userInfo.address"></el-input>
              <span v-else>{{ userInfo.address }}</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>房屋信息</span>
            <el-button-group style="float: right;">
              <el-button type="primary">续签</el-button>
              <el-button type="warning">退租</el-button>
            </el-button-group>
          </div>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item
              label="套房"
            >{{ contract.areaName }}{{ contract.communityName }}{{ contract.roomNumber }}</el-descriptions-item>
            <el-descriptions-item label="租金">{{ contract.rent }}</el-descriptions-item>
            <el-descriptions-item label="期限">{{ contract.leaseTerm }} 年</el-descriptions-item>
            <el-descriptions-item label="起始">{{ contract.startDate }}</el-descriptions-item>
            <el-descriptions-item label="到期">{{ contract.endDate }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ contract.status }}</el-descriptions-item>
          </el-descriptions>
          <br>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editMode: false,
      userInfo: {},
      contract: {}
    };
  },
  mounted() {
    this.showUserInfo();
  },
  methods: {
    showUserInfo() {
      if (this.$store.state.isLogin)
        this.userInfo = { ...this.$store.state.loginTenant };
      else {
        this.$message.error("请先登录");
        this.$router.push("/login");
        return;
      }
      this.$axios
        .post("/contract/getAllContract", {
          name: this.userInfo.name,
          curr: 0,
          size: 1
        })
        .then(res => {
          const item = res.data.data[0];
          this.contract = {
            ...item,
            startDate: item.startDate.substring(0, 10),
            endDate: item.endDate.substring(0, 10)
          };
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    saveUserInfo() {
      this.editMode = !this.editMode;
      if (!this.editMode) {
        this.$axios
          .post("tenant/update", this.userInfo)
          .then(res => {
            if (res.data.code === 200) {
              this.$message.success("保存成功");
              this.$store.commit("setLoginTenant", this.userInfo);
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      }
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 400px;
  margin: 20px auto;
}
.el-form-item {
  margin-bottom: 9px;
}
</style>
